import { Box, IconButton, Paper } from '@mui/material';
import { styled, alpha } from '@mui/material/styles';

// 主容器样式 - 类似Cursor的整洁设计
export const ChatContainer = styled(Box)(({ theme }) => ({
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    backgroundColor: theme.palette.background.default,
    borderLeft: `1px solid ${theme.palette.divider}`,
}));

// 简洁的标题栏 - 优化为更紧凑的设计
export const ChatHeader = styled(Box)(({ theme }) => ({
    padding: theme.spacing(0.75, 1.5),  // 减少内边距
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderBottom: `1px solid ${theme.palette.divider}`,
    backgroundColor: alpha(theme.palette.background.paper, 0.95),  // 半透明背景
    height: '40px',  // 固定更小的高度
    position: 'sticky',  // 使标题栏固定在顶部
    top: 0,
    zIndex: 10,  // 确保标题栏在内容上方
    backdropFilter: 'blur(8px)',  // 背景模糊效果
    '& .MuiIconButton-root': {  // 使按钮更小
        padding: theme.spacing(0.5),
    },
    '& .MuiTypography-root': {  // 标题文字更小
        fontSize: '0.85rem',
        fontWeight: 500,
    },
}));

// 内容区域
export const ChatContent = styled(Box)(({ theme }) => ({
    flexGrow: 1,
    overflow: 'auto',
    padding: 0,
}));

// 输入区域，类似编辑器的设计
export const ChatInputArea = styled(Box)(({ theme }) => ({
    padding: theme.spacing(1, 1.5),
    borderTop: `1px solid ${theme.palette.divider}`,
    backgroundColor: theme.palette.background.paper,
}));

// 用于AI头像的样式
export const AIIcon = styled(Box)(({ theme }) => ({
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: theme.palette.primary.main,
    color: '#fff',
    width: 24,
    height: 24,
    borderRadius: '50%',
    marginRight: theme.spacing(1),
}));

// 消息操作按钮样式
export const MessageActionButton = styled(IconButton)(({ theme }) => ({
    padding: 2,
    fontSize: '0.75rem',
    color: alpha(theme.palette.text.primary, 0.6),
    '&:hover': {
        color: theme.palette.primary.main,
        backgroundColor: alpha(theme.palette.primary.main, 0.08),
    },
}));

// 消息组样式
export const MessagesContainer = styled(Box)(({ theme }) => ({
    display: 'flex',
    flexDirection: 'column',
    gap: theme.spacing(1.5),  // 减少消息之间的间距
    paddingBottom: theme.spacing(4),  // 底部添加额外空间
    // 添加自定义滚动条
    '&::-webkit-scrollbar': {
        width: '6px',
        height: '6px',
    },
    '&::-webkit-scrollbar-track': {
        background: 'transparent',
    },
    '&::-webkit-scrollbar-thumb': {
        background: alpha(theme.palette.divider, 0.3),
        borderRadius: '3px',
        '&:hover': {
            background: alpha(theme.palette.divider, 0.5),
        }
    }
}));

// 添加带动画效果的打字指示器组件
export const TypingDots = styled(Box)(({ theme }) => ({
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '5px',
    padding: theme.spacing(1.5, 2),
    borderRadius: theme.shape.borderRadius,
    backgroundColor: alpha(theme.palette.background.paper, 0.7),
    boxShadow: `0 2px 6px ${alpha(theme.palette.common.black, 0.06)}`,
    backdropFilter: 'blur(8px)',
    width: 'fit-content',
    position: 'relative',
    '&::before': {
        content: '""',
        position: 'absolute',
        left: 0,
        top: '50%',
        transform: 'translateY(-50%)',
        width: '3px',
        height: '60%',
        backgroundColor: theme.palette.primary.main,
        borderRadius: '0 2px 2px 0',
    },
    '& .dot': {
        width: '8px',
        height: '8px',
        borderRadius: '50%',
        backgroundColor: theme.palette.primary.main,
        opacity: 0.8,
        animation: 'bounce 1.4s infinite ease-in-out both',
        filter: `drop-shadow(0 1px 2px ${alpha(theme.palette.primary.main, 0.3)})`,
    },
    '& .dot:nth-child(1)': {
        animationDelay: '-0.32s',
    },
    '& .dot:nth-child(2)': {
        animationDelay: '-0.16s',
    },
    '@keyframes bounce': {
        '0%, 80%, 100%': {
            transform: 'scale(0)',
        },
        '40%': {
            transform: 'scale(1)',
        },
    },
})); 